<div class="demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 60, bottom: 0 }">
  <d-demo-nav [navItems]="navItems"></d-demo-nav>
  <div class="demo-example" [dAnchor]="'date-pipe'">
    <div class="demo-title">DatePipe</div>
    <div class="demo-text"></div>
    <d-codebox id="common-basic-usage" [sourceData]="pipeSource">
      <d-common-pipe demo></d-common-pipe>
    </d-codebox>
  </div>

  <div class="demo-example" [dAnchor]="'helper-utils'">
    <div class="demo-title">Helper Utils</div>

    <div class="demo-text"></div>
    <d-codebox id="common-helper-jump" [sourceData]="helperJumpSource">
      <d-common-helper-jump demo></d-common-helper-jump>
    </d-codebox>

    <d-codebox id="common-helper-download" [sourceData]="helperDownloadSource">
      <d-common-helper-download demo></d-common-helper-download>
    </d-codebox>
  </div>

  <div class="demo-example" [dAnchor]="'iframe-propagate'">
    <div class="demo-title">Iframe event propagate API</div>

    <div class="demo-text"></div>
    <d-codebox id="common-iframe-propagate" [sourceData]="iframePropagateSource">
      <d-common-iframe-propagate demo></d-common-iframe-propagate>
    </d-codebox>
  </div>

  <div class="demo-example" [dAnchor]="'lazy-load'">
    <div class="demo-title">Lazy Load</div>
    <div class="demo-text">
      引入util模块中的LazyLoadModule，使用dLazyLoad指令在滚到到容器底部时响应loadMore事件实现懒加载
    </div>
    <d-codebox id="common-lazy-load" [sourceData]="lazyLoadSource">
      <d-lazy-load demo></d-lazy-load>
    </d-codebox>
  </div>
</div>
